/** @file SamplePage.qml
@brief Qt-Complex test application for Harmattan Meego 1.2

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.1
import com.meego 1.0
import "QtComplex" as Framework
import "QtComplex/Theme.js" as Theme
import "QtComplex/Geometry.js" as Geometry
import "QtComplex/TestApplication.js" as Test

Page {
    id: samplePage
    tools: commonTools

    Framework.ComplexItem {
        id: qtComplex
        theme: "default"
        screenCategory: screen.displayCategory;
    }

    // Background
    Rectangle {
        id: background

        width: samplePage.width
        height: samplePage.height
        color: "black"

        Text {
            id: textBackground
            width: background.width
            anchors.top: background.top
            anchors.topMargin: appTopBanner.height + Geometry.getSeparator()
            anchors.left: background.left
            anchors.right: background.right
            anchors.leftMargin: Geometry.getFieldSpacing()
            anchors.rightMargin: Geometry.getFieldSpacing()
            color: "grey"
            font.pointSize: Geometry.getFontPoints();
            wrapMode: TextEdit.Wrap
            text: "Qt-Complex 1.0rc" +
                  "<br><br>" +
                  "This page shows some examples of the framework components using the default theme elements." +
                  "<br>For more information see the documentation wiki pages.<br>" +
                  "Version 1.0.2 Harmattan, Jul 2011"
        }
    }

    // Background
    Rectangle {
        id: samplebackground
        anchors.top: appTopBanner.bottom
        anchors.topMargin: Geometry.getSeparator()
        anchors.horizontalCenter: parent.horizontalCenter
        width: Math.round(parent.width * 0.90)
        height: Math.round(parent.height * 0.90) - appTopBanner.height
        color: "#ffffff"; radius: 10
        border.width: 3; border.color: Test.appBackground
    }

    // Grouped switch
    Framework.GroupSwitch {
        id: swgroupPage

        anchors.top: samplebackground.top
        anchors.topMargin: Geometry.getSeparator()
        anchors.left: samplebackground.left
        anchors.leftMargin: Geometry.getFieldSpacing()
        width: samplebackground.width - (Geometry.getFieldSpacing() * 2);
        height: (Geometry.getFieldHeight() * 5) + (Geometry.getFieldSpacing())
        fieldSpacing: Geometry.getFieldSpacing();
        fontPoints: Geometry.getFontPoints();
        fieldSeparator: Geometry.getSeparator();
        switchHeigth: Geometry.getFieldHeight();
        fontSwitches: Geometry.getFontPoints();

        themeString: "default"
        grouptitle: "Grouped Switch Example"
        sw1_field: "Option 1"; sw1_infoshow: false; sw1_state: true; sw1_obj: "Switch"
        sw2_field: "Option 2"; sw2_infoshow: false; sw2_state: false; sw2_obj: "Switch"
        sw3_field: "Option 3"; sw3_info: "More Info for this option"; sw3_infoshow: true; sw3_state: false; sw3_obj: "Switch"
    }

    // The first four objects are shown in a centerd column on the screen
    Column {
        id: columnFields

        anchors.top: swgroupPage.bottom
        anchors.topMargin: Geometry.getSeparator()
        anchors.left: samplebackground.left
        anchors.leftMargin: Geometry.getFieldSpacing()
        width: samplebackground.width - (Geometry.getFieldSpacing() * 2);
        height: (Geometry.getFieldHeight() * 2) + (Geometry.getFieldSpacing())
        spacing: Geometry.getFieldSpacing()

        Framework.Loader {
            id: input_txt1
            width: parent.width; elementFactor: 0.20;
            height: Geometry.getFieldHeight(); obj_string: "Button 1";
            fontPoints: Geometry.getFontPoints(); theme: "default";  obj: "HorBtnText";
            obj_flag: false // do not set to object to input text.
            onClicked: { console.log("Button Clicked") }
        }
        Framework.Loader {
            id: input_txt2
            width: parent.width; elementFactor: 0.60;
            height: Geometry.getFieldHeight(); obj_string: "Button 2";
            fontPoints: Geometry.getFontPoints(); theme: "default";  obj: "HorBtnText";
            obj_flag: true
            onClicked: { console.log("Button Clicked") }
        }
    }

    // Top banner
    Item {
        id: appTopBanner

        // Width should be always all the samplePage size
        width: parent.width;
        // Height is the percentage dedicated to the banner
        height: Math.round(parent.height * Test.appTopBanner)
        anchors.top: parent.top

        Framework.Loader {
            id: topbannerLoader; width: parent.width; height: parent.height
            obj_color: Test.appBackground; theme: "default"; obj: "StaticBanner"
        }
    }
}

